<!--
 * @Author: Lizhenyu
 * @Date: 2021-07-20 09:39:30
 * @FilePath: \usp-osm-frondend\src\views\productCenter\productMgmt\components\addLabel.vue
-->
<template>
  <div class="add_label_dialog">
    <el-dialog
      title="添加标签"
      :visible.sync="showAddLabel"
      width="80%"
      :element-loading-text="loadingText"
      :before-close="closeDialog"
      :append-to-body="true"
      top="0"
    >
      <div class="container-form">
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <el-form
              :model="formData"
              label-position="left"
              label-width="80px"
              size="mini"
              ref="formData"
            >
              <el-row :gutter="60">
                <el-col :span="8">
                  <el-form-item label="标签名称">
                    <el-input
                      v-model="formData.labelName"
                      placeholder="标签名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="标签类型">
                    <el-select
                      popper-class="select-class"
                      :popper-append-to-body="false"
                      v-model="formData.labelType"
                      placeholder="请选择"
                    >
                      <el-option key label="全部" value></el-option>
                      <el-option
                        v-for="item in lookupItems.LABELTYPE"
                        :key="item.dicCode"
                        :label="item.dicName"
                        :value="item.dicCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-button
                    @click="resetForm('formData')"
                    icon="el-icon-refresh-left"
                    class="white-btn"
                  >
                    重置
                  </el-button>
                  <el-button
                    @click="fetchList()"
                    icon="el-icon-search"
                    class="dark-btn search-btn"
                  >
                    搜索
                  </el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="container-table">
        <v-table
          :data="tableList"
          ref="table"
          :listLoading="listLoading"
          :loadingText="loadingText"
          :paginationTotal="total"
          :page-size="formData.displayLength"
          @handleSelectionChange="handleSelectionChange"
          v-on:pageSizeChange="pageSizeChange"
          v-on:currentPageChange="currentPageChange"
          border
          pagination
          style="margin-top: 20px"
        >
          <el-table-column type="selection" :reserve-selection="false" width="55"> </el-table-column>
          <el-table-column label="No." min-width="70" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="标签名称"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.labelName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="标签类型"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>
                {{ getDictionaryNameByCode('LABELTYPE', scope.row.labelType) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="标签描述"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.labelDesc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="更新时间"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
        </v-table>
      </div>
      <div class="footer">
        <div class="footer-btn" style="text-align: right;">
          <el-button size="small" @click="saveAddLabel">{{$t('save')}}</el-button>
          <el-button size="small" @click="closeDialog">{{$t('cancel')}}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VTable from '@/components/PageTable/index'
import { mapGetters } from 'vuex'
import { common } from '@/mixins/common'
import { parseTime } from '@/utils'
import { getLabel } from '@/api/label'
export default {
  components: {
    VTable
  },
  mixins: [common],
  data () {
    return {
      showAddLabel: false,
      loadingText: '加载中...',
      formData: {
        displayStart: 0, // 开始查询条数
        displayLength: 10, // 每页展示条数
        labelName: '', // 标签名称
        labelType: '',
        isEnable: '1'
      },
      total: 0,
      labelTypeList: [],
      tableList: [],
      listLoading: false,
      tagList: []
    }
  },
  created () {},
  mounted () {},
  computed: {
    ...mapGetters(['lookupItems'])
  },
  methods: {
    fetchList (idList) {
      const self = this
      this.formData.filteredLabelIdList = idList
      this.listLoading = true
      getLabel(self.formData)
        .then(response => {
          self.listLoading = false
          // 调用查询接口
          const data = response
          if (data) {
            const obj = data.obj
            self.tableList = obj.data || []
            self.tableList.forEach(item => {
              item.updateTime = parseTime(item.updateTime)
              item.createTime = parseTime(item.createTime)
            })
            self.total = obj.total
          } else if (Number(data.code) === 0) {
            this.$confirm(data.msg, {
              confirmButtonText: '确认',
              showCancelButton: false
            })
          } else {
            this.$confirm(this.$t(data.code), {
              confirmButtonText: '确认',
              showCancelButton: false
            })
          }
        })
    },
    handleSelectionChange (val) {
      this.tagList = val
    },
    resetForm (formName) {
      this.formData.labelType = ''
      this.formData.isEnable = '1'
      this.formData.labelName = ''
      this.tagList = ''
      this.$refs.table.restPage()
      this.fetchList()
    },
    pageSizeChange (size) {
      this.formData.displayLength = size
      this.fetchList()
    },
    currentPageChange (curPage) {
      this.formData.displayStart = curPage - 1
      this.fetchList()
    },
    closeDialog () {
      this.showAddLabel = false
      this.resetForm()
    },
    saveAddLabel () {
      this.showAddLabel = false
      const dataList = this.tagList
      this.$emit('getTagList', dataList)
      this.resetForm()
    }
  }
}
</script>

<style>
</style>
